﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script>
    var keyValue = $.request("keyValue");
    var photoableId = $.request("photoable_id");
    var photoableType = $.request("photoable_type");
    $(function () {
        if (!!photoableId && !!photoableType) {
            $("#photoable_type").val(photoableType);
            $("#photoable_id").val(photoableId);
        }

        if (!!keyValue) {
            $.ajax({
                url: "/SiteManage/Photos/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.path) {
                            data.oldpath = 'http://storage.yunspace.com.cn/' + data.path
                    }
                    $("#form1").formSerialize(data);
                }
            });
        }
    });
    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        if ($('#path').val() == "") {
            alert("请先选择您要上传的图片");
            return ;
        }
        $.submitForm({
            url: "/SiteManage/Photos/SubmitForm?keyValue=" + keyValue,
            param: $("#form1").formSerialize(),
            success: function () {
                $.currentWindow().$("#gridList").trigger("reloadGrid");
            }
        })
    }
</script>

<form id="form1">
    <div style="padding-top: 20px; margin-right: 20px;">
        <table class="form">
            @*<tr>
                <th class="formTitle"></th>
                <td class="formValue">
                    <input id="id" name="id" type="text" class="form-control required" placeholder="请录入" />
                </td>
                <th class="formTitle"></th>
                <td class="formValue">
                    <input id="photoable_id" name="photoable_id" type="text" class="form-control required" placeholder="请录入" />
                </td>
            </tr>*@
            <tr>
                <input type="hidden" name="path" id="path" value=""  />
                <input type="hidden" name="photoable_id" id="photoable_id" />
                <input type="hidden" name="photoable_type" id="photoable_type" />
                <th class="formTitle">图片</th>
                <td class="formValue">
                        <div style="width:100px;"><img src=""   id="oldpath" type="img"  style="width:100%;"></div>
                </td>
             
            </tr>
            <tr>
                <th class="formTitle">名称</th>
                <td class="formValue">
                    <input id="name" name="name" type="text" class="form-control " placeholder="请录入" />
                </td>
                <th class="formTitle">标记</th>
                <td class="formValue">
                    <input id="tag" name="tag" type="text" class="form-control " placeholder="请录入" />
                </td>
            </tr>
           
            <tr>
                <th class="formTitle" style="height: 35px;">选项</th>
                <td class="formValue" colspan="3" style="padding-top: 1px;">
                   
                    <div class="ckbox">
                        <input id="is_cover" name="is_cover" type="checkbox"><label for="is_cover">设为首图</label>
                    </div>
            </tr>
          
            <tr>
                <th class="formTitle">简介</th>
                <td class="formValue">
                    <input id="intro" name="intro" type="text" class="form-control " placeholder="请录入" />
                </td>
               
            </tr>
        </table>
    </div>
</form>

<form id="uploader" enctype="multipart/form-data">

    <div style="padding-top: 20px; margin-right: 20px;">
        <table class="form">
            <tr>
                <th class="formTitle">选择图片</th>
                <td class="formValue">
                    <input id="imgfile" type="file"  accept="image/png,image/jpeg,image/gif" class="form-control required ">

                </td>
              
                <td class="formValue">
                    <input type="submit" value="上传" class="btn btn-primary ">
                </td>
                <th class="formTitle"></th>
            </tr>
        </table>
    </div>

</form>
<script>
    var form = document.getElementById('uploader');
    var imgfile = document.getElementById('imgfile');
    form.addEventListener('submit', function (evt) {
        evt.preventDefault();//组织页面刷新
        var data = new FormData();
        if (imgfile != null) {
            //for (var i = 0, len = imgfile.files.length; i < len; i++) {
            //file property: name, size, type, lastModifiedDate

            var file = imgfile.files[0];
            fileSize = file.size;
            fileSize = Math.round(fileSize / 1024 * 100) / 100; //kb
            if (fileSize > 2048) {
                alert('该文件超过2mb，请上传2mb以内的图片！');
                return;
            } else if (fileSize <= 0) {
                alert("请先选择您要上传的图片");
                return;
            }
            data.append(file.name, file);
            $("#name").val(file.name);
            //}

            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                data = JSON.parse(xhr.responseText);
                if (data.state == 1) {
                    $("#path").val(data.path);
                    $("#oldpath").attr("src", data.data + "?111");
                }
                alert(data.msg);
            };
            xhr.onerror = function (err) {
                console.error(err);
            };
            xhr.open('post', '/SiteManage/Photos/UploadPathImage', true);
            xhr.send(data);
        }
    }, false);
</script>

